<script>
	import settings from "@/settings.js"
	import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
	import { message } from 'ant-design-vue';
	import { defineComponent, ref } from 'vue';
	const columns = [
	  {
	    title: '账号',
	    dataIndex: 'name',
	    key: 'name',
	    slots: { customRender: 'name' },
	  },
	  {
	    title: 'IP',
	    dataIndex: 'age',
	    key: 'age',
	    width: 80,
	  },
	  {
	    title: '地址',
	    dataIndex: 'address',
	    key: 'address 1',
	    ellipsis: true,
	  },
	  {
	    title: '登录设备头',
	    dataIndex: 'address',
	    key: 'address 3',
	    ellipsis: true,
	  },
	  {
	    title: '状态',
	    dataIndex: 'address',
	    key: 'address 2',
	    ellipsis: true,
	  },
	  
	  {
	    title: '时间',
	    dataIndex: 'address',
	    key: 'address 4',
	    ellipsis: true,
	  },
	];
	
	const data = [
	  {
	    key: '1',
	    name: 'John Brown',
	    age: 32,
	    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
	    tags: ['nice', 'developer'],
	  },
	  {
	    key: '2',
	    name: 'Jim Green',
	    age: 42,
	    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
	    tags: ['loser'],
	  },
	  {
	    key: '3',
	    name: 'Joe Black',
	    age: 32,
	    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
	    tags: ['cool', 'teacher'],
	  },
	];
	function getBase64(img, callback) {
	  const reader = new FileReader();
	  reader.addEventListener('load', () => callback(reader.result));
	  reader.readAsDataURL(img);
	}
	
	export default defineComponent({
	  components: {
	    LoadingOutlined,
	    PlusOutlined,
	  },
	
	  setup() {
		const headImgDefault = settings.headImg
	    const fileList = ref([]);
	    const loading = ref(false);
	    const imageUrl = ref('');
	
	    const handleChange = info => {
	      if (info.file.status === 'uploading') {
	        loading.value = true;
	        return;
	      }
	
	      if (info.file.status === 'done') {
	        // Get this url from response in real world.
	        getBase64(info.file.originFileObj, base64Url => {
	          imageUrl.value = base64Url;
	          loading.value = false;
	        });
	      }
	
	      if (info.file.status === 'error') {
	        loading.value = false;
	        message.error('upload error');
	      }
	    };
	
	    const beforeUpload = file => {
	      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
	
	      if (!isJpgOrPng) {
	        message.error('You can only upload JPG file!');
	      }
	
	      const isLt2M = file.size / 1024 / 1024 < 2;
	
	      if (!isLt2M) {
	        message.error('Image must smaller than 2MB!');
	      }
	
	      return isJpgOrPng && isLt2M;
	    };
	
	    return {
			headImgDefault,
	      fileList,
	      loading,
	      imageUrl,
	      handleChange,
	      beforeUpload,
		  data,
		        columns,
	    };
	  },
	});
</script>

<template>
	<div class="account">
		<div class="account-top">
			<a-upload
			    v-model:file-list="fileList"
			    name="avatar"
			    list-type="picture-card"
			    class="avatar-uploader"
			    :show-upload-list="false"
			    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
			    :before-upload="beforeUpload"
			    @change="handleChange"
			  >
			    <img width="100"  :src="imageUrl?imageUrl:headImgDefault" alt="avatar" />
			   <!-- <div v-else>
			      <loading-outlined v-if="loading"></loading-outlined>
			      <plus-outlined v-else></plus-outlined>
			      <div class="ant-upload-text">上传头像</div>
			    </div> -->
			  </a-upload>
			  <a-typography-title :level="4">admin</a-typography-title>
		</div>
		<a-card title="登录日志" >
		    <a-table :columns="columns" :data-source="data">
		        <template #name="{ text }">
		          <a>{{ text }}</a>
		        </template>
		      </a-table>
		</a-card>
	</div>
</template>

<style lang="scss" scoped>
	.avatar-uploader{
		margin: 30px auto 0 auto;
		width: 110px;
	}
	.avatar-uploader > .ant-upload {
	  width: 128px;
	  height: 128px;
	 
	}
	.ant-upload .ant-upload-select-picture-card{
		margin-bottom: 0 !important;
		margin-right: 0 !important;
	}
	.account{
		background-color: #fff;
		&-top{
			text-align: center;
		}
	}
</style>
